<script type="text/javascript">
 $(document).ready(function() {
    var id=  document.getElementById("iduf").value;
    getfacturas(id);
        $("#factura").click(function(event) { 
              event.preventDefault();    
              getfacturas(id)
                });
 function getfacturas(id){
            $.ajax({
              type : "GET",
              url :'<?php echo url_for("comprobante/buscarComprobantes") ?>',
              data: {
                     id:id
                   },
              beforeSend: function () {
			$("#loading").css({'display':'block'});
		},
              success : function( data ){
              $("#lstcomprobantes").empty();
              $("#loading").css({'display':'none'});
	      $("#lstcomprobantes").prepend(data);
             }
         });
              var f=  document.getElementById("factura");
              var pp= document.getElementById("plandepago");
              
               f.style.backgroundColor ="#C0C7CC";
               f.style.boxShadow= "inset 1px 1px 1px #999";
               pp.style.boxShadow= "inset 0px 0px 0px #999";
               pp.style.backgroundColor = "#EEEEEE"; 
              }
              
  
  
  $("#plandepago").click(function(event) { 
             event.preventDefault();           
             $.ajax({
              type : "GET",
              url :'<?php echo url_for("planpagoagua/buscarPlanDePago") ?>',
              data: {
                     id:id
                   },
              beforeSend: function () {
			$("#loading").css({'display':'block'});
		},
              success : function( data ){
             $("#lstcomprobantes").empty();
              $("#loading").css({'display':'none'});
	      $("#lstcomprobantes").prepend (data);
             }
         });
             var f=  document.getElementById("factura");
              var pp= document.getElementById("plandepago");
               pp.style.boxShadow= "inset 2px 1px 1px #999";
               pp.style.backgroundColor = "#C0C7CC"; 
               f.style.backgroundColor =  "#EEEEEE";
               f.style.boxShadow= "inset 0px 0px 0px #999";

                });
     
  });

</script>
<style type="text/css">
   
.select {
   display: inline-block;
   vertical-align: middle;
   background-color: transparent;
/*   border: 1px solid ;*/
/*   border-radius: 3px;*/
   font-size: 16px;
    width:30%;   
/*    box-sizing: border-box;
    -moz-box-sizing: border-box;*/
/*    border:1px solid;*/
}

.select a {
   display: inline-block;
   padding: 3px 6px 3px 6px;
   color: #333333;
   text-decoration: none;
/*   box-sizing: border-box;
    -moz-box-sizing: border-box;*/
   
}
.select a:hover  {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

.select a.selected {
   background-color: #C0C7CC;
   box-shadow: inset 1px 1px 1px  #999;
   
}

</style>
<?php include_partial("gestionagua/menuagua") ?>
<div id="sf_admin_container" style="width: 100%;height: 100%">
<div align="LEFT" style="margin-top: 50px">
 <h2  style="margin-top: 50px;height:  20px">Gestion Unidad Funcional </h2>
 <h4> C&oacute;digo: <?php echo $unidadFuncional->getId() ?> </h4>
 <h4>Contribuyente actual:   <?php echo $unidadFuncional->getContribuyente() ?> </h4>

 <input type="hidden" id="iduf" value="<?php echo $unidadFuncional->getId(); ?>" />

   <div class="select" style="margin-top: 2px;">
         <a style="text-decoration:none;" id= "factura" href="" class="selected">FACTURAS</a>
         <a  style="text-decoration:none;"id= "plandepago" href="">PLAN DE PAGO</a>
   </div>

</div>
 <span id="loading" style="display: none;padding-left: 50%">
    <img src="/images/load.gif">
</span>
 <div id="lstcomprobantes" ></div>
 </div>